<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body" v-loading="loading">
                        <div>
                            <form class="form-inline" onsubmit="return false;">
                                <div class="form-group">
                                    <input class="form-control" type="text" placeholder="用户名" v-model="nickname">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" type="text" placeholder="手机号" v-model="mobile">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" type="text" placeholder="代理ID" v-model="agentId">
                                </div>

                                <div class="form-group">
                                    <label>代理等级</label>
                                    <el-select v-model="level" placeholder="全部">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>

                                <div class="row" style="margin: 16px 0 0;">
                                    <label>是否会员</label>
                                    <div class="form-group">
                                        <el-select v-model="isVip" placeholder="全部">
                                            <el-option
                                                    v-for="item in vipOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-success" type="submit" v-on:click="search()">筛选</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                                    @sort-change='sortChange'
                                    :default-sort="{prop: '_id', order: 'descending'}"
                            >
                                <el-table-column
                                        label="ID"
                                        type="index"
                                        :index="indexMethod"
                                        width="40">
                                </el-table-column>
                                <el-table-column
                                        prop="nickname"
                                        label="代理名"
                                        width="60">
                                    <template slot-scope="scope">
                                        <a @click="openEdit(scope.row._id)" style="cursor:pointer;">{{scope.row.nickname
                                            |
                                            titleFormatter}}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="isVip"
                                        label="是否会员"
                                        :formatter="formatVip"
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        prop="level"
                                        label="代理级别"
                                        :formatter="formatLevel"
                                        align="center"
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        prop="scale"
                                        label="佣金比例"
                                        align="center"
                                        sortable
                                        width="92">
                                    <template slot-scope="scope">
                                        <a @click="handleSetScale(scope.row)" style="cursor:pointer;">{{ scope.row.scale }}%</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="directPushNum"
                                        label="直推人数"
                                        align="center"
                                        sortable
                                        width="92">
                                </el-table-column>
                                <el-table-column
                                        prop="directPayNum"
                                        label="直推付费人数"
                                        sortable
                                        align="center"
                                        width="116">
                                </el-table-column>
                                <el-table-column
                                        prop="disseminateNum"
                                        label="传播人数"
                                        sortable
                                        align="center"
                                        width="92">
                                </el-table-column>
                                <el-table-column
                                        prop="disseminatePayNum"
                                        label="传播付费人数"
                                        sortable
                                        align="center"
                                        width="116">
                                </el-table-column>

                                <el-table-column
                                        prop="commission"
                                        label="累计佣金"
                                        align="center"
                                        sortable
                                        width="95">
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span class="span-success" @click="handleEdit(scope.row)">升降级</span>
                                        <span class="span-danger" @click="getQrCode(scope.row.userId)">获取二维码</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="mobile"
                                        label="已绑定手机号"
                                        align="center"
                                        width="92">
                                </el-table-column>
                            </el-table>

                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, sizes, prev, pager, next"
                                        :total="total"
                                        :hide-on-single-page="pageActive"
                                        @size-change="handleSizeChange"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        :page-sizes="[10, 20, 30, 40]"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>

                            <el-dialog title="升降级设置" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                                <el-form :model="form">

                                    <el-form-item label="" :label-width="formLabelWidth">
                                        <h5>{{ form.nickname }}</h5>
                                    </el-form-item>

                                    <el-form-item label="代理级别" :label-width="formLabelWidth">
                                        <el-select v-model="form.level" placeholder="全部" style="width:90%">
                                            <el-option
                                                    v-for="item in optionLevels"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="2级佣金比例" :label-width="formLabelWidth">
                                        <el-select v-model="form.twoLevel"
                                                   :disabled="form.level<=1"
                                                   filterable
                                                   allow-create
                                                   default-first-option
                                                   placeholder="全部" style="width:90%">
                                            <el-option
                                                    v-for="item in twoOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>%
                                    </el-form-item>

                                    <el-form-item label="3级佣金比例" :label-width="formLabelWidth">
                                        <el-select v-model="form.threeLevel"
                                                   :disabled="form.level<=2"
                                                   filterable
                                                   allow-create
                                                   default-first-option
                                                   placeholder="全部" style="width:90%">
                                            <el-option
                                                    v-for="item in threeOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>%
                                    </el-form-item>
                                    <el-form-item label="4-6级佣金比例" :label-width="formLabelWidth">
                                        <el-select v-model="form.fourLevel"

                                                   :disabled="form.level<=3"
                                                   filterable
                                                   allow-create
                                                   default-first-option
                                                   placeholder="全部" style="width:90%">
                                            <el-option
                                                    v-for="item in fourOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>%
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="submitSet">确 定</el-button>
                                </div>
                            </el-dialog>


                            <!--普通的dialog-->
                            <el-dialog title="佣金比例设置" :visible.sync="dialogSetFormVisible" :close-on-click-modal="false">
                                <el-form :model="setForm">
                                    <el-form-item label="佣金比例" :label-width="formLabelWidth">
                                        <el-input
                                                type="number"
                                                placeholder="请输入内容"
                                                v-model="setForm.scale" style="width:80%;">
                                        </el-input>%
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogSetFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="submitSetScale">确 定</el-button>
                                </div>
                            </el-dialog>
                            <!--新增图片-->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AgentComponent",
        data() {
            return {
                options: [],
                optionLevels: [],
                pageActive: false,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: true,
                nickname: '',
                mobile: '',
                agentId: '',
                vipOptions: [{
                    value: -1,
                    label: '全部'
                }, {
                    value: 1,
                    label: '会员'
                }, {
                    value: 0,
                    label: '非会员'
                }],
                isVip: -1,
                level: -1,
                dialogFormVisible: false,
                title: '',
                formLabelWidth: "120px",
                form: {
                    id: 0,
                    catId: 0,
                    nickname: '',
                    level: 0,
                    twoLevel: 5,
                    threeLevel: 5,
                    fourLevel: 0,
                },
                twoOptions: [
                    {
                        value: 10,
                        label: '10',
                    }, {
                        value: 5,
                        label: '5',
                    },
                ],
                threeOptions: [
                    {
                        value: 5,
                        label: '5',
                    }, {
                        value: 3,
                        label: '3',
                    }, {
                        value: 2,
                        label: '2',
                    }
                ],
                fourOptions: [
                    {
                        value: 0,
                        label: '0',
                    }, {
                        value: 2,
                        label: '2',
                    }, {
                        value: 3,
                        label: '3',
                    }
                ],
                setForm:{scale:0},
                dialogSetFormVisible:false
            }
        },
        methods: {
            search: function () {
                let self = this;
                let uri = 'user-extend/post-list';
                self.loading = true;

                let postData = {
                    nickname: self.nickname,
                    mobile: self.mobile,
                    level: self.level,
                    isVip: self.isVip,
                    page: self.currentPage,
                    limit: self.pageSize,
                    order: self.order,
                    orderField: self.orderField
                };

                axios.post(uri, postData).then(function (result) {
                    self.total = result.agents.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.agents.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            sortChange(item) {
                let order = "asc";
                this.orderField = item.prop;
                if (item.order === 'descending') {
                    order = "desc";
                }
                this.order = order;
                this.search();
            },
            handleSizeChange: function (pageSize) {
                this.pageSize = pageSize;
                this.search();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            getInfo() {

            },
            indexMethod: function (index) {
                return index + 1;
            },
            formatVip(row) {
                return row.isVip ? '会员' : '非会员';
            },
            formatTitle: function (row, column) {
                return this.filterLength(row.title, 10);
            },
            initData() {
                let self = this;
                let uri = "user-extend/init-data";
                self.loading = true;

                axios.get(uri).then(function (result) {
                    var initData = result.initData;
                    self.options = [{'value':-1,'label':'全部'}];
                    initData.forEach((item) => {
                        self.options.push(item)
                    });
                    self.optionLevels = initData;
                    self.level = -1;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            formatLevel: function (row, column) {
                var index = this.options.findIndex(item => {
                    if (item.value == row.level) {
                        return true;
                    }
                });
                var item = this.options[index];
                return !item ? '' :item.label;
            },
            getQrCode: function (userId) {
                let self = this;
                let uri = "wechat-user/qr-code/" + userId;
                self.loading = true;
                axios.get(uri).then(function (result) {
                    var html = "<img src='" + result.data + "'/>";
                    self.$alert(html, '二维码（点击右键保存）', {
                        dangerouslyUseHTMLString: true
                    });
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            openEdit(id) {
                this.openUri('user-extend/detail/' + id);
            },
            handleEdit(row) {
                console.log(row);
                let self = this;
                self.dialogFormVisible = true;
                self.id = row._id;
                self.form.nickname = row.nickname;
                self.form.level = row.level;
                self.form.twoLevel = row.twoLevel;
                self.form.threeLevel = row.threeLevel;
                self.form.fourLevel = row.fourLevel;

            },
            submitSet() {
                let self = this;
                let uri = "user-extend/update-level/" + this.id;
                if (!self.form.level) {
                    self.$message.error("必须填写“代理级别”");
                    return;
                }
                if (self.form.level>1 && !self.form.twoLevel) {
                    self.$message.error("必须填写“2级佣金比例”");
                    return;
                }
                if (self.form.level>2 && !self.form.threeLevel) {
                    self.$message.error("必须填写“3级佣金比例”");
                    return;
                }


                self.loading = true;
                self.dialogFormVisible = false;
                axios.put(uri, self.form).then(function (result) {
                    self.loading = false;
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleSetScale(row) {
                let self = this;
                self.dialogSetFormVisible = true;
                self.id = row._id;
                self.setForm.scale = row.scale;
            },
            submitSetScale() {
                let self = this;

                if (self.setForm.scale >= 100){
                    self.$message.error("“佣金比例”不能大于100");
                    return;
                }
                let uri = "user-extend/set-scale/" + this.id+'/'+self.setForm.scale;
                self.loading = true;
                self.dialogSetFormVisible = false;
                axios.get(uri).then(function (result) {
                    self.loading = false;
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
        },

        mounted() {
            this.initData();
            this.search();
        },
        filters: {
            titleFormatter(title) {
                title = !title ? '' : title;
                if (title.length >= 10) {
                    return title.substring(0, 10) + '...';
                }
                return title.length === 0 ? '--' : title;
            }
        }
    }
</script>

<style scoped>

</style>
